<template>
    <!-- {{ $router.options.routes}} -->
  <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        :router=true
      >
    <template v-for="item in $router.options.routes">

        <el-menu-item :index="item.path"  v-if="item.children == undefined && item.meta.show==true">
         <component :is="item.meta.icon" class="icons"></component>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
      
        <el-sub-menu :index="item.path"  v-if="item.children != undefined && item.meta.show==true">
          <template #title>
             <component :is="item.meta.icon" class="icons"></component>
            <span>{{item.meta.title}}</span>
          </template>
          <el-menu-item-group >
            <template v-for="chiln in item.children">
            <el-menu-item :index="chiln.path">
                <component :is="chiln.meta.icon" class="icons"></component>
                {{ chiln.meta.title }}
            </el-menu-item>
            </template>
          
          </el-menu-item-group>
        </el-sub-menu>

          </template>
      </el-menu>

</template>
<script setup>



</script>
<style scoped>

.el-menu{
    height: calc(100vh - 50px);
}
.icons{
    width: 20px;
    height: 20px;
    padding-right: 5px;
}
</style>